import React from 'react';
import { Outlet, Link, useLocation } from 'react-router-dom';
import { Package, Package2, PanelLeft, ShoppingCart, Users2, Bell, CircleUser } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { ThemeWrapper } from '@/components/theme-wrapper';
import { HeaderBreadcrumb } from '@/components/console/header-breadcrumb';
import { TopNavigationMenu } from '@/components/console/top-menu';
import { cn } from '@/lib/utils';
import { HeaderSearch } from '@/components/header-search';
import { LeftMenu } from '@/components/console/left-menu';
import { HeaderTabs } from '@/components/console/header-tabs';

export default function RootLayout() {
    const { pathname } = useLocation();

    return (
        <main>
            <div className='sticky p-2 top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:h-auto sm:border-0'>
                <img src='/logo.png' alt='logo' className='w-10 h-10' />
                <TopNavigationMenu />
                <Sheet>
                    <SheetTrigger asChild>
                        <Button size='icon' variant='outline' className='md:hidden'>
                            <PanelLeft className='h-5 w-5' />
                            <span className='sr-only'>Toggle Menu</span>
                        </Button>
                    </SheetTrigger>
                    <SheetContent side='left' className='sm:max-w-xs'>
                        <ThemeWrapper>
                            <nav className='grid gap-6 text-lg font-medium'>
                                <Link
                                    to='/console'
                                    className='group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base'
                                >
                                    <Package2 className='h-5 w-5 transition-all group-hover:scale-110' />
                                    <span className='sr-only'>Acme Inc</span>
                                </Link>
                                <Link
                                    to='users'
                                    className={cn('flex items-center gap-4 px-2.5 hover:text-primary', {
                                        'text-muted-foreground': pathname !== '/console/users',
                                        'text-primary': pathname === '/console/users',
                                    })}
                                >
                                    <Users2 className='h-5 w-5' />
                                    Users
                                </Link>
                                <Link
                                    to='products'
                                    className={cn('flex items-center gap-4 px-2.5 hover:text-primary', {
                                        'text-muted-foreground': pathname !== '/console/products',
                                        'text-primary': pathname === '/console/products',
                                    })}
                                >
                                    <Package className='h-5 w-5' />
                                    Products
                                </Link>
                                <Link
                                    to='orders'
                                    className={cn('flex items-center gap-4 px-2.5 hover:text-primary', {
                                        'text-muted-foreground': pathname !== '/console/orders',
                                        'text-primary': pathname === '/console/orders',
                                    })}
                                >
                                    <ShoppingCart className='h-5 w-5' />
                                    Orders
                                </Link>
                            </nav>
                        </ThemeWrapper>
                    </SheetContent>
                </Sheet>
                <HeaderSearch />
                <Tooltip>
                    <TooltipTrigger asChild>
                        <Link
                            to='messages'
                            className='hidden relative md:flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-primary'
                        >
                            <Button variant='secondary' size='icon' className='   rounded-full'>
                                <Bell className='h-5 w-5' />
                                <span className='sr-only'>消息</span>
                            </Button>
                            <Badge className=' absolute left-5 bottom-5  flex h-6 w-6 shrink-0 items-center justify-center rounded-full'>
                                6
                            </Badge>
                        </Link>
                    </TooltipTrigger>
                    <TooltipContent side='right'>消息</TooltipContent>
                </Tooltip>
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant='secondary' size='icon' className='rounded-full'>
                            <CircleUser className='h-5 w-5' />
                            <span className='sr-only'>Toggle user menu</span>
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align='end'>
                        <DropdownMenuLabel>未登录</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <Link to='/auth'>
                            <DropdownMenuItem>登录账号</DropdownMenuItem>
                        </Link>
                        <DropdownMenuSeparator />
                        <Link to='settings'>
                            <DropdownMenuItem>个人信息</DropdownMenuItem>
                        </Link>
                        <Link to='settings'>
                            <DropdownMenuItem>修改密码</DropdownMenuItem>
                        </Link>
                        <Link to='settings'>
                            <DropdownMenuItem>帮助中心</DropdownMenuItem>
                        </Link>
                        <Link to='settings'>
                            <DropdownMenuItem>关于我们</DropdownMenuItem>
                        </Link>
                        <Link to='settings'>
                            <DropdownMenuItem>意见反馈</DropdownMenuItem>
                        </Link>
                        <Link to='settings'>
                            <DropdownMenuItem>系统设置</DropdownMenuItem>
                        </Link>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
            <div className='flex-1 relative  flex'>
                <LeftMenu />
                <div className='flex-1'>
                    <HeaderBreadcrumb />
                    <HeaderTabs />
                    <Outlet />
                </div>
            </div>
        </main>
    );
}
